<template>
    <div>
        <v-layout row>
            <v-flex xs12 sm6 offset-sm3>
                <v-card>
                    <v-toolbar dark color="primary" style="box-shadow:none">
                        <v-icon @click="$router.back(-1)">keyboard_arrow_left</v-icon>
                        <v-toolbar-title style="margin:0">消息</v-toolbar-title>
                    </v-toolbar>
                    <v-list two-lne>
                        <div v-for="(value,index) in informations" :key=index @click="$router.push(value.contactUser+'/chat')">
                        <v-list-tile avatar ripple >
                            <v-list-tile-avatar>
                                <img :src=value.contactUserAvatar>
                            </v-list-tile-avatar>
                            <v-list-tile-content>
                                <v-list-tile-title> {{value.contactUser}}</v-list-tile-title>
                                <v-list-tile-sub-title>{{value.message}}</v-list-tile-sub-title>
                            </v-list-tile-content>
                        </v-list-tile>
                        <v-divider v-if="index + 1 < informations.length" :key="`divider-${index}`"></v-divider>
                        </div>
                    </v-list>
                </v-card>
            </v-flex>
        </v-layout>
    </div>
</template>

<script>
export default {
    data(){
        return{
            informations:[
                {contactUser:'张三',contactUserAvatar:require('../assets/avatar.jpg'),message:'你好你好你好你好'},
                {contactUser:'李四',contactUserAvatar:require('../assets/avatar.jpg'),message:'你好你好你好你好'},
                {contactUser:'王五',contactUserAvatar:require('../assets/avatar.jpg'),message:'你好你好你好你好'},
                {contactUser:'大白',contactUserAvatar:require('../assets/avatar.jpg'),message:'你好你好你好你好'},
                {contactUser:'小白',contactUserAvatar:require('../assets/avatar.jpg'),message:'你好你好你好你好'},
            ]
        }
    }
}
</script>



